<template>
  <h1 class="row-title">基本用法</h1>
  <div class="row">
    <Duyi-Dropdown
      placement="bottom"
      :menu-options="options1"
      trigger="hover"
      :open-delay="500"
      :close-delay="500"
      hideAfterClick
      @visible-change="visibleChangeHandler"
      @select="selectHandler"
    >
      <Duyi-Button type="primary">Hover下拉菜单</Duyi-Button>
    </Duyi-Dropdown>
  </div>
  <h1 class="row-title">触发方式</h1>
  <div class="row">
    <Duyi-Dropdown
      placement="bottom"
      :menu-options="options1"
      trigger="click"
      hideAfterClick
      @visible-change="visibleChangeHandler"
      @select="selectHandler"
    >
      <Duyi-Button type="success">点击触发下拉菜单</Duyi-Button>
    </Duyi-Dropdown>
  </div>
  <h1 class="row-title">手动打开关闭</h1>
  <div class="row">
    <Duyi-Dropdown
      placement="bottom"
      :menu-options="options1"
      hideAfterClick
      manual
      @visible-change="visibleChangeHandler"
      @select="selectHandler"
      ref="dropdownRef"
    >
      <Duyi-Button>菜单容器</Duyi-Button>
    </Duyi-Dropdown>
  </div>
  <div class="row">
    <Duyi-Button type="primary" @click="openClick">
      点击手动触发显示
    </Duyi-Button>
    <Duyi-Button type="warning" @click="closeClick">
      点击手动触发隐藏
    </Duyi-Button>
  </div>
  <h1 class="row-title">支持VNode节点</h1>
  <div class="row">
    <Duyi-Dropdown
      placement="bottom"
      :menu-options="options2"
      trigger="click"
      hideAfterClick
      @visible-change="visibleChangeHandler"
      @select="selectHandler"
    >
      <Duyi-Button type="success">点击触发下拉菜单</Duyi-Button>
    </Duyi-Dropdown>
  </div>
</template>

<script setup>
import { ref, h } from 'vue'

// 组件实例
const dropdownRef = ref(null)

const options1 = ref([
  { key: 1, label: 'item1' },
  { key: 2, label: 'item2', divided: true },
  { key: 3, label: 'item3', disabled: true },
  { key: 4, label: 'item4' },
])
// 支持虚拟节点
const options2 = ref([
  { key: 1, label: h('div', { class: 'bar', innerHTML: 'hello' }) },
  { key: 2, label: 'item2', divided: true },
  { key: 3, label: 'item3', disabled: true },
  { key: 4, label: 'item4' },
])

// 状态改变事件处理函数
const visibleChangeHandler = visible => {
  console.log('下拉菜单的状态', visible)
}
// 选择了哪一项
const selectHandler = item => {
  console.log('选择的下拉菜单项', item)
}

// 手动触发显示和隐藏事件处理函数
const openClick = () => {
  dropdownRef.value.show()
}
const closeClick = () => {
  dropdownRef.value.hide()
}
</script>

<style lang="scss" scoped></style>
